<template>
    <nav aria-label="Page navigation" v-if="pageTotalNum > 1">
        <span class="page-info">共{{ props.total }}条数据，每页显示{{ props.pageSize }}条</span>
        <ul class="pagination page-ul justify-content-center">
            <li class="page-item" :class="{ disabled: !hadPre }" @click="prePage()">
                <a class="page-link">上一页</a>
            </li>
            <li
                v-for="num in pageTotalNum"
                class="page-item"
                @click="jumpPage(num)"
                :class="{ active: num === props.page }"
                ><a class="page-link">{{ num }}</a></li
            >
            <li @click="nextPage()" class="page-item" id="nextNo" :class="{ disabled: !hadNext }">
                <a class="page-link">下一页</a>
            </li>
        </ul>
    </nav>
</template>

<script setup lang="ts">
    import { computed } from 'vue';

    const props = defineProps<{
        total: number;
        page: number;
        pageSize: number;
    }>();

    const emits = defineEmits(['update:page']);

    const pageTotalNum = computed(() => {
        return Math.ceil(props.total / props.pageSize);
    });

    const hadPre = computed(() => {
        return props.page > 1;
    });

    const hadNext = computed(() => {
        return props.page < pageTotalNum.value;
    });

    const jumpPage = (num: number) => {
        emits('update:page', num);
    };

    const nextPage = () => {
        if (hadNext.value) {
            emits('update:page', props.page + 1);
        }
    };

    const prePage = () => {
        if (hadPre.value) {
            emits('update:page', props.page - 1);
        }
    };
</script>
